<script setup>
import { ref } from 'vue'

const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['submit', 'close'])

// 弹窗可见性
const visible = ref(false)

// 表单数据
const form = ref({
  title: '',
  commodityCode: '',
  specCode: '',
  quantity: 0,
  weight: 0
})

// 初始化表单
const initForm = () => {
  form.value = {
    title: props.row.title || '',
    commodityCode: props.row.commodityCode || '',
    specCode: props.row.specCode || '',
    quantity: props.row.orderQuantity || 0,
    weight: 0
  }
}

// 打开弹窗
const open = () => {
  initForm()
  visible.value = true
}

// 关闭弹窗
const close = () => {
  visible.value = false
  emit('close')
}

// 提交
const submit = () => {
  if (!form.value.weight) {
    ElMessage.warning('请输入重量')
    return
  }
  emit('submit', form.value)
  close()
}

// 暴露方法给父组件使用
defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="visible" title="称重" width="600px">
    <el-form :model="form" label-width="80px">
      <!-- 商品名称 -->
      <el-form-item label="商品名称">
        <el-input v-model="form.title" disabled />
      </el-form-item>

      <!-- 商品编码 -->
      <el-form-item label="商品编码">
        <el-input v-model="form.commodityCode" disabled />
      </el-form-item>

      <!-- 规格编码 -->
      <el-form-item label="规格编码">
        <el-input v-model="form.specCode" disabled />
      </el-form-item>

      <!-- 数量 -->
      <el-form-item label="数量">
        <el-input-number v-model="form.quantity" :min="1" disabled />
      </el-form-item>

      <!-- 重量 -->
      <el-form-item label="重量(g)">
        <el-input-number v-model="form.weight" :min="1" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>